<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "5744df4db651bb6da9a170100fbaeada",
        }
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        AMapLoader.load({
            key: "eae8864b2a58e87dbfa5997162e9664c",       // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        }).then((AMap) => {
            var map = new AMap.Map('container', {
                center: [104.066301, 30.572961],
                zoom: 13
            });
        }).catch((e) => {
            console.error(e);  //加载错误提示
        });

    </script>
</head>

<body class="sports-run">
    <nav class="navbar"></nav>
    <main class="sports-run-main">
        <div class="sports-run-main-title">
            目前累计跑步距离：
            <p><span id="total">999.99</span>公里</p>
        </div>
        <div id="container">
        </div>
        <div id="goBtn">GO</div>
    </main>
    <nav class="tabbar"></nav>

    <!-- 蒙层 -->
    <div class="mask"></div>
    <!-- 弹出层 -->
    <div class="gobox">3
    </div>
</body>

</html>